<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/bootstrap.css">
    <script src="../js/jquery-3.7.1.min.js"></script>
    <script src="../js/bootstrap.bundle.js"></script>
    <title>导航栏</title>
</head>
<body>
    <!-- 带下拉选项的导航栏 -->
    <!-- fixed-top可以让导航栏固定在浏览器顶部 -->
    <!-- fixed-bottom可以让导航栏固定在浏览器低部 -->
    <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
        <a href="#" class="navbar-brand">NIIT</a>
        <ul class="navbar-nav">
            <li class="nav-item">
                <a href="#" class="nav-link">首页</a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link">关于我们</a>
            </li>
            <li class="nav-item dropdown">
                <a href="" class="nav-link dropdown-toggle" id="navbardrop" data-toggle="dropdown">
                    联系我们
                </a>
                <div class="dropdown-menu">
                    <a href="#" class="dropdown-item">邮件</a>
                    <a href="#" class="dropdown-item">手机</a>
                    <a href="#" class="dropdown-item">微信</a>
                </div>
            </li>
        </ul>
        <div class="ml-auto">
            <!-- 在导航栏内添加表单 -->
            <form action="" class="form-inline">
                <input type="text" class="form-control" placeholder="请输入要搜索的内容">
                <button type="submit" class="btn btn-success ml-2">搜索</button>
            </form>
        </div>
    </nav>
    <img src="../images/1.png" alt="">
    <img src="../images/2.png" alt="">
    <img src="../images/3.png" alt="">
    <img src="../images/4.png" alt="">
    
</body>
</html>